<template>
    <div class="videoContainer">
        <div class="content">
            <div class="loginBox">
                <!-- 登录框 -->
                <el-card class="box-card">
                    <!-- 头部 -->
                    <div slot="header" class="clearfix">
                        <h3>系统登录</h3>
                    </div>
                    <!-- 用户名 -->
                    <div class="myinput1">
                        <span>用户名：</span>
                        <el-input placeholder="请输入账号" v-model="userInput.username">
                            <i slot="prefix" class="el-icon-user-solid"></i>
                        </el-input>
                    </div>
                    <!-- 密码 -->
                    <div class="myinput2">
                        <span>密码：</span>
                        <el-input placeholder="请输入密码" v-model="userInput.password" type="password">
                            <i slot="prefix" class="el-icon-lock"></i>
                        </el-input>
                    </div>

                    <div class="btns">
                        <el-button @click="login">登录</el-button>
                        <el-button @click="regist">注册</el-button>
                        <el-link type="primary" class="checkTo" @click="toIndex">前往首页</el-link>
                    </div>
                </el-card>
            </div>
        </div>
        <reginst ref="regist"></reginst>
        <!-- <el-button :plain="true" @click="open2">成功</el-button> -->
        <!-- <div class="videoContainer"> -->
		<video class="fullscreenvideo" id="bgVid" playsinline="" autoplay="" muted="" loop="">
			<source src="../video/mixkit-top-aerial-shot-of-seashore-with-rocks-1090.mp4" type="video/mp4">
		</video>
	<!-- </div> -->
    </div>
</template>

<script>
import reginst from '@/components/reginst.vue'
export default {
    name: "login",
    data() {
        return {
            userInput: {
                username: 'admin',
                password: '18383838523cz'
            }
        }
    },
    components: {
        reginst
    },
    methods: {
        async login() {
            //登录
            const res = await this.$http.post('api/login', JSON.stringify(this.userInput))
            console.log(res,res.status)
            if(res.status == 200){
                // 保存cookie
                this.$cookie.set('cookie',res.data.cookie)
                console.log(this.$cookie.get('cookie'))
                this.$message.success(res.data.msg)
                this.$router.push('/home')
            }else {
                this.$message.success('登陆失败')
            }
        },
        regist() {
            this.$refs.regist.drawer = true
        },
        toIndex(){
            this.$router.push('/index')
        }
    }

}
</script>

<style lang="scss" scoped>
span {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    width: 100px;
    text-align: center;
    height: 50px;
    line-height: 50px;
}

.content {
    // backdrop-filter: blur(5px);
    // background-color: #550000;
     opacity: 0.6; 
    .loginBox {
        width: 500px;
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(5px);

        // height: 500px;
        // border: 1px solid #333;
        margin: 150px auto;

        .box-card {

            // filter: blur(5px);
            .header {
                h3 {
                    font-size: 28px;
                    font-weight: 600;
                }
            }

            .myinput1 {
                display: flex;

                i {
                    line-height: 43px;
                }
            }

            .myinput2 {
                display: flex;
                margin: 20px 0 0 0;

                i {
                    line-height: 43px;
                }
            }

            .btns {
                // background-color: pink;
                margin: 20px 0 0 260px;
                .checkTo {
                    margin: 10px 10px 0 100px;
                }
            }
        }

    }
}

// .videoContainer {
//     position: fixed;
//     width: 100%;
//     height: 100%;
//     overflow: hidden;
//     z-index: -100;
// }

// .videoContainer:before {
//   content: "";
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   display: block;
//   z-index: -1;
//   top: 0;
//   left: 0;
//   background: rgba(25,29,34,.65);
// }

// 视频部分
// .videoContainer {
// 		position: fixed;
// 		width: 100%;
// 		height: 100%;
// 		overflow: hidden;
// 		z-index: -100;
// 	}

	.videoContainer:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
		z-index: -1;
		top: 0;
		left: 0;
		// background: rgba(25, 29, 34, .65);
	}

    .fullscreenvideo {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-transition: 1s opacity;
	transition: 1s opacity;
	}
</style>